<template>
  <div class="map-card">
    <div class="map-body" id="map_components"></div>
    <ToolTips ref="toolTipRef" @handleOperat="handleOperat" v-show="isTool" />
    <div class="show-lon-lat">
      <div class="lon-lat">LV_{{ mapZoomIndex }}</div>
      <div class="show-item">{{ showLonLat(MapCoordinate[0], 'lon') }}</div>
      <div class="show-item">{{ showLonLat(MapCoordinate[1], 'lat') }}</div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue';
  import MapJS from '/@/views/monitor/components/map/js/index.js';
  import MethodsJS from '/@/views/monitor/components/map/js/methods.js';
  import DrawJS from '/@/views/monitor/components/map/js/draw.js';
  import * as UtilMethods from '/@/views/monitor/components/map/js/util.js';
  import { transfLonAndLat } from '/@/utils/chart.js';
  import ToolTips from './tool/index.vue';
  import DrawMethods from './tool/draw';

  const props = defineProps({
    type: {
      type: String,
      default: '',
    },
    isTool: {
      type: Boolean,
      default: false,
    },
  });

  let mapTarget = null;
  // 中心点
  let MapCoordinate = ref([119.45206246145788, 29.17467466774048]);
  // 图层级别
  let mapZoomIndex = ref(0);
  let MapConfig = {
    center: MapCoordinate.value,
    zoom: 16,
    EPSGCode: 'EPSG:3857',
    mapZIndexLimit: [12, 18],
    shipZoomLimit: [12, 16],
    target: 'map_components', // 元素节点
  };
  // 标记的layername
  let signLayerName = 'signLayer';
  let signIcon = null;
  const emit = defineEmits(['getClickCoordinate']);

  // 初始化海图
  const initMainMap = () => {
    mapTarget = MapJS.initMap(MapConfig);
    MapJS.initGraticule(mapTarget);
    initMapMethod(mapTarget);
  };

  // 初始化海图事件
  function initMapMethod() {
    // 鼠标移动
    mapTarget.on('pointermove', (evt) => {
      // 鼠标变手
      mapTarget.getTargetElement().style.cursor = mapTarget.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
      MapCoordinate.value = UtilMethods.transformNowToLonlat(evt.coordinate);
    });

    // 点击事件
    mapTarget.on('click', (evt) => {
      // 根据坐标查找到对应位置的feature
      const lonAndLat = UtilMethods.transformNowToLonlat(evt.coordinate);
      if (props.type === 'point') {
        DrawJS.drawSign(mapTarget, [{ longitude: lonAndLat[0], latitude: lonAndLat[1] }], {
          icon: signIcon,
          name: signLayerName,
        });
        emit('getClickCoordinate', lonAndLat);
      }
    });

    // 右击事件
    mapTarget.getViewport().oncontextmenu = (event) => {
      // 去除浏览器自带的菜单事件
      event.preventDefault();
    };

    // 关键事件：地图缩放的时候触发事件
    var mview = mapTarget.getView();
    mapZoomIndex.value = mview.getZoom();
    mapTarget.on('movestart', () => {});
    mapTarget.on('moveend', () => {
      // 监听层级变化
      if (mview.getZoom() !== mapZoomIndex.value) {
        mapZoomIndex.value = mview.getZoom();
      }
    });
  }

  function showLonLat(row, type = 'lat') {
    return transfLonAndLat(row, type, true);
  }

  function drawPoint(row, icon) {
    signIcon = icon;
    if (row.latitude && row.longitude) {
      DrawJS.drawSign(mapTarget, [row], {
        icon,
        name: signLayerName,
      });
    }
  }

  function drawArea(row) {
    DrawJS.drawArea(mapTarget, [row]);
  }

  function drawAreas(list) {
    DrawJS.drawArea(mapTarget, list);
  }

  // 手动绘制，并获取经纬度集合
  function measure(type) {
    return new Promise((r) => {
      DrawJS.removeLayer(mapTarget, 'Area');
      DrawJS.measure(mapTarget, type).then((corrdinates) => {
        DrawJS.removeLayer(mapTarget, 'measureLayer');
        DrawJS.drawArea(mapTarget, [
          {
            bound: {
              coordinates: [corrdinates],
            },
          },
        ]);
        r(corrdinates);
      });
    });
  }

  // tool
  function handleOperat(row) {
    const fnList = {
      handleDraw: () => {
        DrawMethods.measure(mapTarget, row.params);
      },
      handleERBL: () => {
        DrawMethods.measureERBL(mapTarget);
      },
      handleClearDraw: () => {
        var layerTmp = mapTarget
          .getLayers()
          .getArray()
          .find((m) => m.get('name') === 'DRAW');
        if (layerTmp) DrawMethods.handleClearDraw(layerTmp, mapTarget);
      },
      handleZoom: () => {
        const view = mapTarget.getView();
        const zoom = view.getZoom();
        view.setZoom(zoom + row.params);
      },
    };
    fnList[row.fn](row);
  }

  function moveToCenterByLonAndLat(point) {
    UtilMethods.moveToCenterByLonAndLat(point, mapTarget, null, 500)
  }

  defineExpose({ initMainMap, drawPoint, drawArea, drawAreas, measure, moveToCenterByLonAndLat });
</script>

<style lang="less" scoped>
  .map-card {
    height: 100%;
    #map_components {
      width: 100%;
      height: 100%;
      background-color: #99b3cc;
    }
    .show-lon-lat {
      position: absolute;
      display: flex;
      bottom: 10px;
      left: calc(50% - 75px);
      z-index: 1000;
      background-color: hsla(0, 0%, 100%, 0.7);
      padding: 3px 5px;
      border-radius: 3px;
      .lon-lat {
        text-align: right;
        font-size: 12px;
        color: #333;
        margin-right: 5px;
      }
      .show-item {
        text-align: right;
        font-size: 12px;
        color: #333;
        width: 70px;
        margin: 0 5px;
      }
    }
  }
</style>
